<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地存储</title>
    <style>
        body{
            text-align: center;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <form action="">
        <input id="saveInput" type="text">
        <button id="save" type="button">存储</button>
        <br>
        <br>
        <input id="readInput" type="text">
        <button id="read" type="button">读取</button>
        <br>
        <br>
        <button type="button" id="delete">清除一个</button>
        <button type="button" id="clear">清除所有</button>
    </form>
</body>
<script>
    let saveInput = document.getElementById('saveInput');
    let save = document.getElementById('save');
    save.addEventListener('click',e =>{
        let text = saveInput.value;
        //设置存储项(添加，修改)
        sessionStorage.setItem('name',text);
        sessionStorage.username = text;
        //在localStorage中存储
        localStorage.setItem('name',text);
    });

    let readInput = document.getElementById('readInput');
    let read =document.getElementById('read');
    read.addEventListener('click',e =>{
        //读取存储项
        //如果Key不存在，那么返回null
        //let text = sessionStorage.getItem('name');
        let text = sessionStorage.name;
        readInput.value = text;

       

    });
    let deleteBtn = document.getElementById('delete');
    let clearBtn = document.getElementById('clear');
    deleteBtn.addEventListener('click', e =>{
        //清除指定存储项
        sessionStorage.removeItem('name');
    });
    //清除所有存储项
    clearBtn.addEventListener('click',e =>{
        sessionStorage.clear();
    })
</script>
</html>